<template>
  <div class="image-block">
    <viewer :images="images">
      <div style="overflow: hidden">
        <div class="images-display-area">
          <img v-for="(src,index) in images" :key="index" :src="src" style="width: 40%;margin:10px">
        </div>
      </div>
    </viewer>
  </div>
</template>
<script>
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import Vue from 'vue'
import { query_visual_history } from '@/api/remote-search'
Vue.use(VueViewer)
export default {
  data() {
    return {
      images: [
        'https://picsum.photos/200/200',
        'https://picsum.photos/300/200',
        'https://picsum.photos/250/200'
      ]
    }
  },
  mounted() {
    this.get_images_list()
  },
  methods: {
    show() {
      this.$viewerApi({
        images: this.images
      })
    },
    get_images_list() {
      query_visual_history()
        .then(res => {
        // console.log(res)
          this.images = res.data.image_urls
        })
    }
  }
}
</script>

<style lang="scss">
.image-block{
  display: flex;
  flex-flow: column;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.images-display-area{
  width:100%;
  height:600px;
  align-items: center;
  justify-content: center;
  margin: 25px;
  overflow-y: scroll;
  overflow-x: hidden;
  img {
    transition: all 0.2s ease-in-out 0s;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
  }
  img:hover  {
    transform: scale(1.1);
  }
}

</style>
